<template>

  <div class="u-page u-page-process-bg u-box">
    <!-- 用户信息 -->
    <div class="u-cl-white u-mt-30 u-mb-30">
      <div class="u-mr-10 float-left">
        <u-avatar :src="userinfo.avatarUrl" size="110"></u-avatar>
      </div>
      <div class="u-flex">
        <div class="u-ml-5 u-pointer">
          {{userinfo.userName}}
        </div>
        <div class="u-ml-5 u-mt-5 u-pointer" style="background: #6ac2f9;" v-if="years">
          <u-icon :name="sex==='男'?'man':'woman'" color="#ffffff" size="28"></u-icon>
          {{years}}
        </div>
        <div class="u-ml-5  u-mt-5 u-pointer" style="background: #6ac2f9;" v-if="city">
          <u-icon name="map" color="#ffffff" size="28"></u-icon>
          {{city}}
        </div>
        <div class="u-ml-5 u-mt-5 u-pointer" style="background: #4dc822;padding: 0 6px 0 6px" v-if="userinfo.authentication==='已认证'">
          <!--
            <u-tag
              :text="userinfo.authentication==='已认证'?'最佳拍档':'拍档'"
              :type="userinfo.authentication==='已认证'?'success':'info'"
              mode="dark"
              size="mini"
              ></u-tag>
          -->
          最佳拍档
        </div>
        <div class="u-ml-5 u-mt-5 u-pointer" style="background: #ebebeb;padding: 0 6px 0 6px" v-else>
          <span style="color: #828282">拍档</span>
        </div>
      </div>
      <div class="u-flex" style="margin-top: 10rpx">
        <div class="u-ml-5 u-pointer">
          <u-tag
              text="项目经历"
              :type="projectExperience"
              mode="dark"
              size="mini"
              @click="toPage(1)"
          ></u-tag>
          <u-tag
              text="团队资源"
              :type="teamResource"
              mode="dark"
              size="mini"
              @click="toPage(2)"
          ></u-tag>
          <u-tag
              text="私有场景"
              :type="privateScene"
              mode="dark"
              size="mini"
              @click="toPage(3)"
          ></u-tag>
          <u-tag
              text="财税服务"
              :type="taxationServices"
              mode="dark"
              size="mini"
              @click="toPage(4)"
          ></u-tag>
        </div>
      </div>
    </div>


    <!-- 表单 -->
    <div class="rule-form rule-form-input-right u-box u-radius-lg u-shadow u-bcl-white">
      <div class="u-ml-5 u-mt-15">
        <div class="u-inline u-cl-content u-fz-12 u-cl-blue u-flex2">
          <div class="lineH100">
            <span>{{userinfo.jobCategory}}</span>
          </div>
        </div>
      </div>
      <u-form ref="uForm" :model="form">
        <u-form-item label="专业技能" prop="label">
          <div class="u-scroll-x u-mr-5" style="width: 440rpx;">
            <u-tag
                v-for="(item, index) in this.RestructuringLabel(form.mainLabel)"
                :key="index"
                :text="item.label"
                type="info"
                mode="dark"
                size="mini"
            ></u-tag>
          </div>
        </u-form-item>

        <u-form-item label="兴趣爱好">
          <div class="u-scroll-x u-mr-5" style="width: 440rpx;">
            <u-tag
                v-for="(item, index) in this.RestructuringLabel(form.hobbyLabel)"
                :key="index"
                :text="item.label"
                type="info"
                mode="dark"
                size="mini"
            ></u-tag>
          </div>
        </u-form-item>

        <u-form-item label="个人价值">
          <div class="u-text-right">{{form.personalValue}}</div>
        </u-form-item>

        <u-form-item label="团队价值">
          <div class="u-text-right">{{form.teamValue}}</div>
        </u-form-item>

        <u-form-item label="个人定位">
          <div class="u-text-right"> {{form.personalPosition}}</div>
        </u-form-item>

        <u-form-item label="个人简介" :border-bottom="false">
        </u-form-item>

        <div v-if="form.personalProfile" >
          <u-parse :html="this.escape2Html(form.personalProfile)"></u-parse>
        </div>
        <div v-else style="height: 250rpx; text-align: center;line-height: 250rpx">此人很懒，还没完善个人简介。</div>

        <!-- 补充资料 -->
        <u-form-item label="成功案例" label-position="top" :border-bottom="true">
        </u-form-item>

			  <div v-if="isShow==1">
          <u-collapse ref="collapseView" :item-style="itemStyle" event-type="close" :arrow="true" :accordion="false" @change="autoHeight">
            <u-collapse-item :index="index" :title="'第'+(index+1)+'个案例'" v-for="(item, index) in CaseJsonData" :key="index">
							<view class="collapse-item">
							  <u-form-item label="案例名称" label-position="top" :label-style="labelStyle">
								  <div style="font-weight: normal" v-html="item.caseName"></div>
							  </u-form-item>

                <u-form-item label="案例描述" label-position="top" :label-style="labelStyle">
                  <div style="font-weight: normal" v-html="item.caseDetails"></div>
								</u-form-item>

							  <u-form-item label="关键字" :label-style="labelStyle">
								  <!-- 已添加的标签列表 -->
								  <div class="u-scroll-x u-mr-5" style="width: 450rpx;">
                    <u-tag
                      v-for="(item, i) in item.skills"
                      :key="i"
                      :text="item.label"
                      type="info"
                      mode="dark"
                    ></u-tag>
								  </div>
							  </u-form-item>
							</view>
						</u-collapse-item>
					</u-collapse>
				</div>
        <div v-else style="height: 250rpx; text-align: center;line-height: 250rpx">此人还没成功的案例。</div>
      </u-form>
	</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form:{
        mainLabel:'',//专业标签
        hobbyLabel:'',//兴趣爱好
        personalValue:'',//个人价值
        teamValue:'',//团队价值
        personalPosition:'',//个人定位
        personalProfile:''//个人简介
      },
	  isShow: '0',
	  PerSynopsis: '',
	  CaseJsonData: [],
      docUnid:'',
      userId:'',
      userinfo: {
        userName:'',
        avatarUrl:'',
        authentication:'',
        jobCategory:'',
      },
      city:'',
      sex:'',
      years:'',

      teamResource:'',
      projectExperience:'',
      privateScene:'',
      taxationServices:'',
      itemStyle:{},
      labelStyle:{}

    };
  },

  onLoad: function (option) {
    this.userId = option.userId;
    this.docUnid = option.docUnid;
    this.formatNick();
    this.getBasicInfo();
    this.checkItem();
	  this.getCase();
	  this.itemStyle = {
	    'border-bottom':'1px solid rgb(230, 230, 230)',
	    'padding': '0 8rpx',
	    'font-size': '28rpx',
	    'font-weight': 'bold'
	  }

	  this.labelStyle = {
	    'font-weight':'normal'
	  }

  },

  methods: {

    //格式化拍档昵称和头像
    async formatNick(){
      let data = await this.getFormatNick(this.userId, uni.getStorageSync('userInfo').userId, this.docUnid, 'getNickAndPic');
      let jsonStr = JSON.parse(data.data)
      if ( data.code==='200') {
        this.userinfo.userName = jsonStr.nickName;
        this.userinfo.avatarUrl = jsonStr.avatarUrl
      }
    },

    async getBasicInfo(){
      let res = await this.$u.api.unifyRequest({
        userId:this.userId,
        nickName: this.userinfo.nickName,
        appid: 'AppletsPro',
        wf_num: 'R_AppletsPro_B021',
      });
      if(res.code === "200"){
        this.form.personalValue = res.data.personalValue?res.data.personalValue:"不详";
        this.form.teamValue = res.data.teamValue?res.data.teamValue:"不详";
        this.form.personalPosition=res.data.personalPosition?res.data.personalPosition:"不详";
        this.form.personalProfile= res.data.personalProfile;
        this.form.mainLabel= res.data.mainLabel;
        this.form.hobbyLabel= res.data.hobby;
        this.userinfo.jobCategory= res.data.jobCategory.replaceAll(',','-');
        this.userinfo.authentication = res.data.authentication;
        this.city = res.data.city;
        this.sex = res.data.Sex;
        this.years = res.data.year;
      }
    },

    async checkItem(){
      let res = await this.$u.api.unifyRequest({
        userId:this.userId,
        nickName: this.userinfo.nickName,
        appid: 'AppletsPro',
        wf_num: 'R_AppletsPro_B022',
      });
      if(res.code === "200"){
        this.teamResource = res.data.hasTeam?"warning":"info"
        this.projectExperience = res.data.hasItem?"warning":"info"
        this.privateScene = res.data.hasScene?"warning":"info"
        this.taxationServices = res.data.hasServices?"warning":"info"
      }
    },

    toPage(action){
      let url = "/";
      if(action===1 && this.projectExperience==='warning'){
        url = "/pages_process/itemInfo/projectList?userId="+this.userId;
      }
      else if(action===2 && this.teamResource==='warning'){
        url = "/pages_process/itemInfo/teamList?userId="+this.userId;
      }
      else if(action===3 && this.privateScene==='warning'){
        url = "";
      }
      else if(action===4 && this.taxationServices==='warning'){
        url = "";
      }
      this.$u.route(url);
    },

    /**
    * 获取报名时填写的补充资料
    */
    async getCase(){
      const userInfo = uni.getStorageSync('userInfo');
      let result = await this.$u.api.unifyRequest({
        userId: userInfo.userId,// 请求接口的用户id
        nickName: userInfo.nickName,
        appid: 'ExpertCooperate',
        wf_num: 'R_ExpertCooperate_BL013',
        Partnerid: this.userId,
        docUnid: this.docUnid,
        loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      result = JSON.parse(JSON.stringify(result));
      if(result.code == "200"){
        this.PerSynopsis = result.data.PerSynopsis;// 一句话简介
        if(this.isNotNull(result.data.CaseJsonData)){
          this.CaseJsonData = JSON.parse(result.data.CaseJsonData);// 成功案例
          this.isShow = '1';
        }
      }
    },

    /**
    * collapse组件自适应高度
    */
    autoHeight(){
      this.$nextTick(() => {
        this.$refs.collapseView.init()
      });
    },
  },

};
</script>

<style lang="scss" scoped>

.float-left{
  float: left;
}

.float-right{
  float: right;
}

.lineH100 {
  line-height: 50rpx;
}

.u-flex2 {
  display: flex;
  justify-content: space-between;
}
</style>
